<template>
	<view class="third_box" :style="{height: windowHeight + 'px'}">
		<web-view style="width: 100%;height: 100%;" @message="message" :src="src"></web-view>
		
		<view class="vedio_box" v-show="testShow">			
			<!-- 接收中 -->
			<text class="jie_shou mn fs_36_i" v-if="isPlay">{{ 'ᠱᠢᠩᠭᠡᠭᠡᠵᠦ ᠪᠠᠢᠨ᠎ᠠ' }}</text>
			
			<!-- 事件 -->
			<text class="time" v-if="isPlay">{{ currentTime }}</text>
			
			<!-- 全屏按钮 -->
			<i v-if="isPlay" class="large_icon iconfont icon-quanjufangda2 mainColor fs_32_i"></i>
			
			<!-- 监控视频 -->
			<video class="full kai_guan_video" :src="currentVideoSrc"></video>
		</view>
		
		<view class="kai_guan_box" v-show="testShow">
			<view class="kai_guan_item" v-for="(item, index) in kaiGuanList" :key="index">
				<view class="left_box">
					<text class="status vertical_text mn fs_40 mainColor" v-if="item.swithType == 0">ᠬᠠᠭᠠᠵᠥ ᠪᠠᠢᠨ᠎ᠠ</text>
					<text class="status vertical_text mn fs_40 mainColor"  v-if="item.swithType == 1">ᠨᠡᠭᠡᠭᠡᠵᠥ ᠪᠠᠢᠨ᠎ᠠ</text>
					<view class="kai_guan">
						<!-- 开关图标 -->
						<i class="iconfont icon-38kaiguanguan1 color_ccc" v-if="item.swithType == 0" @click="swithKaiGuan(index, 1)"></i>
						<i class="iconfont icon-kaiguan mainColor" v-if="item.swithType == 1" @click="swithKaiGuan(index, 0)"></i>
					</view>
				</view>
				
				<view class="right_box">
					<text class="name mn fs_36_i" @click="handleClickTitle(index)">{{ item.titleMn }}</text>
					
					<!-- 设置图标 -->
					<i class="iconfont icon-shezhi mainColor fs_40_i" @click="configKaiGuan(index)"></i>
				</view>
			</view>
			
			<!-- 设置开关界面 -->
			<view class="config_box" v-if="showConfig">
				<view class="item title">
					<i class="iconfont icon-xiala1 mainColor fs_60_i" @click="showConfig = false"></i>
					<text class="vertical_text mn fs_40">{{ kaiGuanList[configIndex].titleMn }}</text>
				</view>
				<view class="item">
					<text class="vertical_text mn fs_40">ᠬᠤᠪᠢᠶᠠᠯᠴᠠᠬᠤ</text>
				</view>
				<view class="item">
					<text class="vertical_text mn fs_40" @click="setTime()">ᠴᠠᠭ ᠲᠣᠭᠲᠠᠭᠠᠬᠤ</text>
				</view>
				<view class="item">
					<text class="vertical_text mn fs_40">ᠬᠠᠷᠠᠭᠤᠯ ᠤᠭᠰᠠᠷᠠᠬᠤ</text>
				</view>
				<view class="item">
					<text class="vertical_text mn color_ff2c64 fs_40">ᠬᠠᠰᠤᠬᠤ</text>
				</view>
			</view>
		</view>

		<!-- 定时 -->
		<view class="set_time_box" v-if="showSetTime" v-show="testShow">
			<view class="set_time">
				<input class="close_time_input" type="text" v-model="closeTime">
				<text class="vertical_text mn fs_40">
					 ᠰᠧᠺᠦ᠋ᠨ᠋ᠳ᠋᠎ᠦᠨ ᠳᠠᠷᠠᠭ᠎ᠠ ᠬᠠᠭᠠᠬᠤ
				</text>
				
				<view class="oprate_btn_box">
					<i class="iconfont icon-yuyinguanbi mainColor fs_50_i" @click="showSetTime = false"></i>
					<i class="iconfont icon-tijiao mainColor fs_50_i" @click="submitCloseTime()"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '@/mixins/basic.js'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				testShow: false,
				src: '',
				
				user: {},
				isPlay: false,
				kaiGuanList: [],
				currentVideoSrc: '',
				showConfig: false,
				configIndex: 0,
				showSetTime: false,
				closeTime: 0
			}
		},
		
		onLoad(options) {
			// 获取设备高度
			this.getSystemHeight();
			
			// 获取当前时间
			// this.getCurrentTime()
			
			// 向 web-view 传递参数
			if (options.type) {
				// this.src = `http://localhost:8088/#/hard-ware?type=${options.type}`
				this.src = `https://hxyc.dayaar.com.cn/hxyc-web-view-mn/#/hard-ware?type=${options.type}&token=${uni.getStorageSync('token')}`
			}
			
			// this.getKaiGuanList(options.type)
		},
		
		methods: {
			// 获取开关列表
			getKaiGuanList(type) {
				NET.request(API.getKaiGuanList, { type }, 'GET')
				.then(res => {
					// console.log('获取开关list : ', res)
					if (res.code == 200) {						
						this.kaiGuanList = res.data
						
						for (let i in res.data) {
							if (res.data[i].swithType == 1) {
								this.currentVideoSrc = res.data[i].monitorUrl
							}
						}
					}
				})
				.catch(err => {
					console.error('获取开关list失败 : ', err)
				})
			},
			
			// 控制开关
			swithKaiGuan(index, val) {
				let id = this.kaiGuanList[index].id
				let swithType = val
				
				NET.request(API.swithHardWare, { id, swithType }, 'GET')
				.then(res => {
					// console.log('控制开关 : ', res)
					if (res.code == 200) {
						this.kaiGuanList[index].swithType = val
						
						if (val == 1) {
							this.isPlay = true
							this.currentVideoSrc = this.kaiGuanList[index].monitorUrl
						}
					}
					
					setTimeout(() => {
						this.getKaiGuanState(id, index, val)
					}, 4000)

				})
				.catch(err => {
					console.error('控制开关失败 : ', err)
				})
			},
			
			// 获取开关状态
			getKaiGuanState(id, i, val) {
				NET.request(API.getKaiGuanState, { id }, 'GET')
				.then(res => {
					// console.log('获取开关状态 : ', res)
					if (res.code == 200) {
						if (res.data !== val) {
							uni.showToast({
								title: '开关控制失败！', icon: 'error'
							})
							this.kaiGuanList[i].swithType = res.data
							
							if (res.data == 0) {
								this.currentVideoSrc = ''
							} else {
								this.currentVideoSrc = this.kaiGuanList[i].monitorUrl
							}
						}
					}
				})
				.catch(err => {
					console.error('获取开关状态失败 : ', err)
				})
			},
			
			// 打开 开关监控
			handleClickTitle(index) {
				this.currentVideoSrc = this.kaiGuanList[index].monitorUrl
			},
			
			// 设置开关
			configKaiGuan(index) {
				this.configIndex = index
				this.showConfig = true
			},
			
			// 定时
			setTime() {
				this.showSetTime = true
			},
			
			// 提交定时
			submitCloseTime() {
				
			}
		}
	}
</script>

<style lang="less" scoped>	
	.third_box {
		width: 100%;
		
		.vedio_box {
			width: 100%;
			height: 40%;
			position: relative;
			
			image { width: 100%; height: 100%; }
			
			.jie_shou {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				
				writing-mode: vertical-lr;
				// font-family: mn;  
				// -webkit-font-family: mn;
			}
			
			.time {
				position: absolute;
				left: 20rpx;
				bottom: 20rpx;
			}
			
			.large_icon { 
				width: 60rpx; 
				height: 60rpx;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
			
			.kai_guan_video {
		
			}
		}
	
		.kai_guan_box {
			width: 100%;
			height: 60%;
			background-color: #1c9aa0;
			padding: 15rpx;
			box-sizing: border-box;
			overflow-y: auto;
			
			.kai_guan_item {
				width: 48%;
				height: 40%;
				float: left;
				background-color: #fff;
				border-radius: 20rpx;
				position: relative;
				
				.left_box {
					width: 80%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					
					.status {
						position: absolute;
						top: 20rpx;
						left: 20rpx;
					}
					
					.kai_guan {
						width: 50%;
						height: 50%;
						// border: 1px solid #f00;
						position: absolute;
						top: 50%;
						left: 58%;
						transform: translate(-50%, -50%);
						
						.iconfont { width: 100%; height: 100%; font-size: 140rpx; }
					}
				}
				
				.right_box {
					width: 20%;
					height: 100%;
					background-color: #ffe207;
					position: absolute;
					top: 0;
					right: 0;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					
					.name {
						writing-mode: vertical-lr;
						color: #1c9aa0;
						font-size: 28rpx;
						position: absolute;
						top: 10rpx;
						left: 50%;
						transform: translateX(-50%);
					}
					
					.iconfont {
						position: absolute;
						bottom: 10rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		
			.kai_guan_item:nth-child(odd) {
				margin-bottom: 3%;
				margin-right: 3%;
			}
			
			.config_box {
				width: 100%;
				height: 400rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				background: #fff;
				position: absolute;
				left: 0;
				bottom: 0;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
				
				.title {
					border: none !important;
					overflow-y: hidden;
				}
				
				.item {
					width: 20%;
					border-left: 1px solid #ccc;
					position: relative;
					
					.iconfont {
						position: absolute;
						top: 10rpx;
						left: 50%;
						transform: translateX(-50%);
					}
					
					text {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	
		.set_time_box {
			width: 100%;
			height: 100%;
			background-color: #fff;
			border: 1px solid #1c9aa0;
			border-radius: 10rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: rgba(#000, .2);
			
			.set_time {
				width: 30%;
				height: 450rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #fff;
				border-radius: 10rpx;
				text-align: center;
				padding: 20rpx;
				box-sizing: border-box;
				
				.close_time_input {
					width: 80rpx;
					height: 80rpx;
					border: 1px solid #1c9aa0;
					border-radius: 10rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}
				
				text {
					height: 280rpx;
					position: absolute;
					top: 100rpx;
					left: 50%;
					transform: translateX(-50%);
					// border: 1px solid #ff0;
				}
				
				.oprate_btn_box {
					width: 100%;
					height: 60rpx;
					position: absolute;
					bottom: 10rpx;
					left: 0;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
